<template>
  <div class="home">
    <heads />
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <div class="con">
      <van-sidebar v-model="activeKey" class="tab" @change="change">
        <van-sidebar-item
          v-for="(itme, index) in tab"
          :key="index"
          v-bind:title="itme"
        />
      </van-sidebar>
      <div class="list">
        <van-grid :border="false" :column-num="3">
          <van-grid-item
            v-for="(itme, index) in $store.state.tab"
            v-bind:key="index"
            border
            v-on:click="add(itme, index)"
          >
            <van-image
              v-bind:src="itme.imgUrl"
              v-bind:class="{ bor: itme.level == 1 }"
            />
            <span v-bind:class="{ col: itme.level == 1 }">
              {{ itme.name }}</span
            >
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="footer">
      <p>
        <span>已选食物{{ $store.state.shopping.length }}</span>
        <span @click="comment">去测评</span>
      </p>
      <div>
        <el-tag
          v-for="(itme, index) in $store.state.shopping"
          :key="index"
          closable
          @close="handleClose(itme, index)"
        >
          {{ itme.name }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import heads from "../components/Heads";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      tab: ["主食", "豆奶制品", "蔬菜类"],
    };
  },
  methods: {
    change() {
      this.$http(`/${this.tab[this.activeKey]}.json`, "get").then((res) => {
        this.$store.commit("addTab", res.data);
      });
    },
    add(itme, index) {
      this.$store.commit("add", { itme, index });
    },
    handleClose(itme, index) {
      this.$store.commit("del", { itme, index });
    },
    comment(){
      this.$router.push({path:'/comment'});
    }
  },
  mounted() {
    if (!JSON.parse(localStorage.getItem("vuex"))) {
      this.change();
    }
  },
  filters: {
    filtime: (val) => {
      let lastime = new Date(val);
      let cretime = new Date();
      let newtime = cretime - lastime;
      var str = "";
      if (newtime >= 0 && newtime < 1000 * 60 * 30) {
        str = "30分钟";
      } else if (newtime >= 1000 * 60 * 30 && newtime < 1000 * 60 * 60) {
        str = "1小时";
      } else if (newtime >= 1000 * 60 * 60 && newtime < 1000 * 60 * 60 * 24) {
        str = "1天";
      } else if (
        newtime >= 1000 * 60 * 60 * 24 &&
        newtime < 1000 * 60 * 60 * 24 * 7
      ) {
        str = "7天";
      } else {
        str = "一个月";
      }
      return str + "前";
    },
    // 时间过滤器  格式是 XX小时前
  },
  components: {
    heads,
  },
};
</script>

<style lang="scss" scoped>
.con {
  display: flex;
  .tab {
    width: 20%;
  }
  .list {
    width: 80%;
  }
}
.col {
  color: red;
}
.bor {
  border: 1px solid red;
}
.footer {
  width: 100%;
  padding: 0 20px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
  p {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    span:last-child {
      background: red;
      padding: 4px 10px;
      border-radius: 20px;
      color: #fff;
    }
  }
  div {
    span {
      margin-right: 20px;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>